<!DOCTYPE HTML>
<html>

	<include file="frontend_page/home/blog/blog_header"/>
	<script type="text/javascript" src="/static/yui/jquery.fancybox-1.3.4/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
	<script type="text/javascript" src="/static/yui/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
	<link rel="stylesheet" type="text/css" href="/static/yui/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css"
		  media="screen" />
	<style>
		.motto_list{
			text-decoration: none;
			list-style-type: none;
			margin-left: -28px;
		}
		.motto_list>li{
			float: left;
			width: 150px;
			height: 150px;
			text-align: center;
			padding-top: 11%;
			margin-left: 2%;
			margin-top: 1%;
			position: relative;
			list-style-type: none;
		}
		.motto_list>li>div{
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
		}
		.motto_list>li>div>img{
			display: inline-block;
			margin-top: 50%;
			-webkit-transform: translateY(-50%);
			transform: translateY(-50%);
		}
		#work_gallery{
			width:100%;
			float:left;
		}
		#work_gallery .pro_items{
			width:100%;
			margin:0px 18px  20px 0px;
			float:left;
		}
	</style>
	<script type="text/javascript">
        $(document).ready(function () {

            $("a[rel=example_group]").fancybox({
                'transitionIn': 'none',
                'transitionOut': 'none',
                'titlePosition': 'over',
            });

        });
	</script>
	<style>
		#fancybox-close {
			margin-right: -16px;
		}
	</style>
	<body class="homepage">

	<include file="frontend_page/home/blog/blog_nav"/>

	<!-- Main -->
		<div id="main-wrapper">
			
			<!--<div id="banner">
				<div class="container">
					<div class="row">
						<section>
							<a href="#" class="image full"><img src="/static/yui/images/pics01.jpg" alt=""></a>
						</section>
					</div>
				</div>
			</div>-->

			<div class="container">
				<div id="main">
	
					<div class="row">

						<!-- Content -->
							<div id="content" class="8u skel-cell-important">
								<section>
									<a href="javascript:" style="text-decoration: none;" class="mottoFlow">
										<header>
											<h2>沧海一语</h2>
											<span class="byline">游荡的孤高灵魂是不需要羁绊之地的</span>
										</header>
									</a>
									<div>
										<ul class="layui-timeline">
											<foreach name="timeline" item="line">
												<li class="layui-timeline-item">
													<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
													<div class="layui-timeline-content layui-text"
													<?php if(count(explode(';',$line['pic_urls']))>8) { ?>
													  style="height:520px"
													<?php } ?>
													<?php if(count(explode(';',$line['pic_urls']))>4) { ?>
													style="height:360px"
													<?php } ?>
													<?php if(!empty($line['pic_urls'])) { ?>
													  style="height:220px"
													<?php } ?>
													>
														<h3 class="layui-timeline-title">{$line.created_at|date='Y-m-d H:i:s',###}</h3>
														<p>
															{$line.content|html_entity_decode=###}
														</p>
														<div >
															<ul class="motto_list" id="work_gallery">
																<?php if(!empty($line['pic_urls'])) foreach(explode(';',$line['pic_urls']) as $v) { ?>
																<li style="list-style-type: none"><div class="pro_items">
																	<a rel="example_group" class="gallery-box" href="{$v}" target="_blank">
																		<img src="{$v}" style="width: 150px;height: 150px">
																	</a>
																</div></li>
																<?php } ?>
															</ul>
														</div>
													</div>
												</li>
											</foreach>
											<li class="layui-timeline-item">
												<i class="layui-icon layui-timeline-axis">&#xe63f;</i>
												<div class="layui-timeline-content layui-text">
													<div class="layui-timeline-title">过去</div>
												</div>
											</li>
										</ul>
									</div>
								</section>
							</div>
							
						<!-- Sidebar -->
							<div id="sidebar" class="4u">
								<section>
									<header>
										<h2>最新游记</h2>
										<span class="byline">5CM/S</span>
									</header>
									<ul class="style1">
										<foreach name="article" item="ar">
											<li style="border-bottom: 1px solid #f2f2f2">
												<p class="date"><a href="#p1">{$ar.updated_at|date='Y-m-d H:i:s',###}<b style=" font-size: 1.5em;">{$ar.tag_name}</b></a></p>
												<p>
													<a href="/frontendArtDetail?id={$ar.id}" target="_blank">
														{$ar.title}
														<br>
													</a>
												</p>
												<span class="fh5co-post-date">
													<script>
														var label_info=['layui-badge layui-bg-green','layui-badge layui-bg-blue','layui-badge layui-bg-black','layui-badge layui-bg-gray','layui-badge layui-bg-orange'];
														var label='{$ar.label}';
														label=label.split('--');
														for (var i=0;i<label.length;i++){
															document.write("<span style='margin-right: 5px;margin-top: 5px' class='"+label_info[i%5]+"'>"+label[i]+"</span>");
														}
													</script>
												</span>
											</li>
										</foreach>
									</ul>
								</section>
							</div>
	
					</div>
				
				</div>
			</div>
		</div>
	<!-- /Main -->

	<!-- Copyright -->
	<include file="frontend_page/home/blog/blog_copyright"/>

	</body>

	<div id="mottoTimeline" style="display: none;background: #ffffff;padding: 20px;">
		<ul class="layui-timeline">

		</ul>
	</div>


</html>
<script>

	$(function () {

        layui.use(['flow'], function(){
            let $ = layui.jquery; //不用额外加载jQuery，flow模块本身是有依赖jQuery的，直接用即可。
            let flow = layui.flow;
            flow.load({
                elem: '#mottoTimeline' //指定列表容器
                ,done: function(page, next){ //到达临界点（默认滚动触发），触发下一页
                    let lis = [];
                    //以jQuery的Ajax请求为例，请求下一页数据（注意：page是从2开始返回）
                    $.get('/frontendTimeFlow?page='+page, function(res){
                        //假设你的列表返回在data集合中
                        layui.each(res.data, function(index, item){
                            let imgstr = "";
                            let height = "";
							if (item.pic_urls != null) {
                                let pics = item.pic_urls.split(';');
                                let imgs = [];
                                for (let i=0 ;i<pics.length;i++) {
                                    let img =   " <li><div class=\"pro_items\"><a rel=\"example_group\" class=\"gallery-box\" href=\""+pics[i]+"\" target=\"_blank\">\n" +
                                        "<img src=\""+pics[i]+"\" style=\"width: 150px;height: 150px\">\n" +
                                        "</a></div></li>\n" ;
                                    imgs.push(img);
                                }
                                imgstr = imgs.join('  ');
                                height = "style=\"height:220px\"";
                                if (pics.length>8) {
                                    height = "style=\"height:520px\"";
								} else if (pics.length>4) {
                                    height = "style=\"height:360px\"";
								}
							}
                        	let li_style = "<li class=\"layui-timeline-item\">\n" +
                                "               <i class=\"layui-icon layui-timeline-axis\">&#xe63f;</i>\n" +
                                "               <div class=\"layui-timeline-content layui-text\" "+height+">\n" +
                                "                 <h3 class=\"layui-timeline-title\">"+item.updated_at+"</h3>\n" +
                                "                    <p>" + item.content+ "</p>\n" +
                                "                    <div >\n" +
                                "                        <ul class=\"motto_list\" id=\"work_gallery\">\n" +imgstr+
                                "                        </ul>\n" +
                                "                    </div>\n" +
                                "                 </div>\n" +
                                "               </li>";
                            lis.push(li_style);
                        });
                        //执行下一页渲染，第二参数为：满足“加载更多”的条件，即后面仍有分页
                        //pages为Ajax返回的总页数，只有当前页小于总页数的情况下，才会继续出现加载更多
                        next(lis.join(''), page < res.pages);
                        $("a[rel=example_group]").fancybox({
                            'transitionIn': 'none',
                            'transitionOut': 'none',
                            'titlePosition': 'over',
                        });
                    });
                }
            });
		});

        $(".mottoFlow").on('click' , function(){
			$('#mottoTimeline').show();
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                area: ['800px','550px'],
                skin: 'layui-layer-nobg', //没有背景色
                shadeClose: true,
                zIndex:1099,
                content: $('#mottoTimeline'),
                end : function(){
                    $('#mottoTimeline').hide();
                }
            });
		});

    });

</script>